<!--
 * @Author: YeFei
 * @Date: 2021-11-08 11:14:14
 * @LastEditTime: 2021-11-08 11:14:15
 * @Descripttion:
-->
<template>
	<a-layout class="index-page">
		<a-page-header>
			<template #title>首页</template>
		</a-page-header>

		<a-layout-content class="page-content">
			<a-row>
				<a-col :sm="{ span: 24 }" :md="{ span: 12 }" class="qr-code left">
					<div class="qr-code-box">
						<img src="~@/assets/images/mini.png" />
					</div>
					<p class="qr-code-name">超级货运小程序</p>
				</a-col>





				<a-col :sm="{ span: 24 }" :md="{ span: 12 }" class="qr-code right">
					<div class="qr-code-box">
						<img src="~@/assets/images/apk.png" />
					</div>
					<p class="qr-code-name">超级转运手APP</p>
				</a-col>
			</a-row>
		</a-layout-content>

		<!--  -->
	</a-layout>
</template>

<script>
	export default {}
</script>

<style lang="less">
	.index-page {
		.page-content {
			background: url("~@/assets/images/index-background.webp") no-repeat center /
				100% 100%;
			padding-top: 180px;

			@media (max-width: 767px) {
				padding-top: 60px;
			}
		}

		.qr-code {
			text-align: center;

			.qr-code-box {
				display: inline-block;
				width: 280px;
				height: 280px;
				padding: 18px 20px;
				// border: 2px solid #339e56;
				background: url("~@/assets/images/box.png") no-repeat center / 100% 100%;
				> img {
					width: 240px;
					height: 240px;
				}
			}
			.qr-code-name {
				color: rgba(51, 158, 86, 1);
				font-size: 20px;
				line-height: 28px;
				font-weight: 500;
				margin-bottom: 30px;
			}
		}
	}
</style>
